<template>
	<div class="m-song-wrap">
		<div class="m-song-disc">
			<div class="m-song-turn">
				<div class="m-song-rollwrap">
					<div class="m-song-img">
						<base-image :picUrl="picUrl" class="a-circling"
						:class="{'paused':!playstate}"></base-image>
					</div>
				</div>
				<div class="m-song-lgour">
					<div class="m-song-light a-circling" 
					:class="{'paused':!playstate}"></div>
				</div>
			</div>
			<span class="m-song-plybtn" v-show="!playstate">

			</span>
		</div>
	</div>
</template>

<script>
	import baseImage from "@/components/base/image.vue"
	export default {
		props: {
			picUrl: String,
			playstate:Boolean
		},
		components: {
			baseImage
		}
	}
</script>

<style lang="scss">
	.m-song-wrap {
		padding-top: 63px;
	}

	.m-song-disc {
		position: relative;
		width: 248px;
		height: 248px;
		margin: 0 auto;
	}

	.m-song-turn {
		width: 100%;
		height: 100%;
	}

	.m-song-disc:after {
		content: " ";
		position: absolute;
		top: -63px;
		left: 107px;
		z-index: 5;
		width: 84px;
		height: 122px;
		background: url(https://s3.music.126.net/mobile-new/img/needle.png?702cf6d95f29e2e594f53a3caab50e12=) no-repeat;
		background-size: contain;
	}

	.m-song-turn:before {
		content: " ";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		background: url(https://s3.music.126.net/mobile-new/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f=) no-repeat;
		background-size: contain;
	}

	.m-song-rollwrap {
		position: absolute;
		width: 150px;
		height: 150px;
		left: 50%;
		top: 50%;
		z-index: 1;
		margin: -75px 0 0 -75px;
	}

	.m-song-lgour,
	.m-song-light {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 3;
	}

	.m-song-light {
		background: url(https://s3.music.126.net/mobile-new/img/disc_light.png?2bb24f3fd11569809b817b4988f12bc7=) no-repeat;
		background-size: contain;
	}

	.m-song-plybtn {
		position: absolute;
		width: 50px;
		height: 50px;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 10;
		background: url() 0 0 no-repeat;
		background-size: contain;
	}

	.m-song-plybtn:after {
		content: "";
		display: block;
		position: absolute;
	}

	@media screen and (min-width: 360px) {
		.m-song-wrap {
			padding-top: 70px;
		}

		.m-song-disc {
			width: 296px;
			height: 296px;
		}

		.m-song-disc:after {
			width: 96px;
			height: 137px;
			top: -70px;
			left: 133px;
			background-image: url(https://s3.music.126.net/mobile-new/img/needle-ip6.png?be4ebbeb6befadfcae75ce174e7db862=);
		}

		.m-song-turn:before {
			background-image: url(https://s3.music.126.net/mobile-new/img/disc-ip6.png?69796123ad7cfe95781ea38aac8f2d48=);
		}

		.m-song-rollwrap {
			width: 184px;
			height: 184px;
			margin: -92px 0 0 -92px;
		}

		.m-song-light {
			background-image: url(https://s3.music.126.net/mobile-new/img/disc_light-ip6.png?996fc8a2bc62e1ab3f51f135fc459577=);
		}

		.m-song-plybtn {
			width: 56px;
			height: 56px;
		}
	}

	.a-circling {
		-webkit-animation: circling 20s linear infinite;
		animation: circling 20s linear infinite;
	}
	
	.paused{
		animation-play-state: paused;
	}
	
	@keyframes circling {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn);
		}
	}
</style>
